<template>
   <div class="Outbox">
     <div class="top">
          <ul>
           <router-link to="/"> <li :class="{active:changeIndex==1}" @click="passIndex(1)"><i class="iconfont icon-yinle"></i> 发现音乐</li></router-link>
           <router-link to="/video"> <li :class="{active:changeIndex==3}"  @click="passIndex(3)"><i class="iconfont icon-shipin"></i> Mv</li></router-link>
          </ul>
      </div>
      <div class="Outbox-bottom">
           <ul v-if="playlist.length>0">
            <li style="text-align:center;font-size:14px;color:#ccc" >
              创建的音乐
             <i @click="showValone=!showValone" v-if="showValone" class="el-icon-arrow-down"></i>
             <i @click="showValone=!showValone"  v-else  class="el-icon-arrow-up"></i>
            </li>
            <li :class="{active:changeIndex==i+5}" v-if="showValone" v-for="(item,i) in playlist" :key="i" @click="indexChange(1,i,item)"><i class="iconfont icon-gedan"></i> {{item.name}}</li>
           </ul>
              <ul v-if="likeList.length>0">
              <li style="text-align:center; font-size:14px;color:#ccc">收藏的音乐 
              <i @click="showValtow=!showValtow" v-if="showValtow" class="el-icon-arrow-down"></i>
              <i @click="showValtow=!showValtow"  v-else  class="el-icon-arrow-up"></i>
            </li>
            <li :class="{active:Index2==i}" v-if="showValtow" v-for="(item,i) in likeList" :key="i" @click="indexChange(2,i,item)"><i class="iconfont icon-gedan"></i> {{item.name}}</li>
          </ul>
      </div>
   </div>
</template>

<script>
export default {
      data(){
        return{
            changeIndex:1, //控制顶部高亮
            likeList:[],   //收藏歌单
            playlist:[],   //创建歌单
            showValone:true,
            showValtow:true,
            Index2:-1
        }
      },
      computed:{
        userId(){
           return this.$Store.state.homePage.userName.userId || ""
        }
      },
      methods:{
        passIndex(num){
          this.Index2=-1;
          this.changeIndex=num
        },
        async getUserSong(){  
       //获取用户歌单
        console.log("我是调用",this.userId)
       if(this.userId==""){
         console.log("里面的",this.userId)
           this.likeList=[]
           this.playlist=[]  
           return  
       } 
       let timestamp = Date.parse(new Date());
        const {data:res} = await this.$request("/user/playlist", {
        uid: this.userId,
        timestamp
       });
       let index = res.playlist.findIndex(item =>item.subscribed == true)
       res.playlist.forEach(item => {
          if(item.name=="你真的真的很强喜欢的音乐") {
               return  item.name="我喜欢的音乐" 
                
             } 
       });
         this.playlist= res.playlist.slice(0, index);              
       this.likeList = res.playlist.slice(index);
      },
      indexChange(num,i,item){
          if(num==1){
            this.Index2=-1;
            this.changeIndex=5+i
             this.$router.push(`MusicDetails?id=${item.id}`)
          }else{
              this.changeIndex=0
              this.Index2=i
             this.$router.push(`MusicDetails?id=${item.id}`)
          }
      }
   },
   watch:{
     userId(){
        this.getUserSong()
     },

   },
   mounted(){
    this.getUserSong()
   }
} 
</script>

<style lang="less" scoped>
  .Outbox{
    margin-top:70px;
    position: fixed;
    left:0;
    background-color:#333;
    width: 140px;
    height:1000px;
    border-right:1px solid #ccc;
    .Outbox-bottom{
      width:140px;
      height:460px;
        overflow-y:auto;
        overflow-x:hidden;
        li{
          padding-left:8px;
            // text-align:center;
            line-height: 30px;
            width:100%;
            height:30px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
       .active{background-color: #fff;font-size:20px;font-weight:600}
    }
    .top{
     width:140px;
     height:100px;
        padding:10px 10px;
         li{
            // margin-top:10px;
            // text-align:center;
            line-height: 30px;
            width:100%;
            height:30px;
         }
      }
    }
  .active{background-color: #fff;font-size:20px;font-weight:600}
</style>